<template>
    <div class='box'>
      <div class="cart">
        <van-swipe-cell v-for="(item,index) in store.state.cart" :key="index">
          <van-row style="display:flex;align-items:center">
            <van-col span="3" style="padding:10px">
              <input type="checkbox" v-model="item.check" @click="changeCheck(index)"> 
            </van-col>
            <!-- 商品卡片区域 -->
            <van-col span="21">
              <van-card style="background:none" :num="item.num" price="2.00" 
                title="商品标题" :thumb="item.goodsCoverImg">
                <template #title>
                  <p class="title">
                    <van-row>
                      <van-col span="22">{{item.goodsName}}</van-col>
                      <van-col span="2">x{{item.goodsCount}}</van-col> 
                    </van-row>
                  </p>
                </template>
                <!-- 价格 -->
                <template #price>
                  <span style="color:red;font-size:20px">￥{{item.sellingPrice}}</span>
                </template>
                <!-- 加减 -->
                <template #num>
                  <van-stepper v-model="item.goodsCount" name="checked" @plus="plus(item.cartItemId)" @minus="minus(item.cartItemId)"/>
                </template>
              </van-card>
            </van-col> 
          </van-row> 
 <!-- //删除 -->
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(item.cartItemId)" />
          </template>
        </van-swipe-cell>
      </div>
      <!-- 底部-->
      <van-submit-bar v-if="store.state.cart.length>0" style="margin-bottom:70px" :price="zprice*100" :button-text="'提交订单('+znum+')'" @submit="onSubmit">
        <input type="checkbox" v-model="store.state.checked" @click="qx" >全选
      </van-submit-bar>
      <div v-else>
        <van-empty description="购物车空空如也~" />
        <van-button type="primary" @click="toHome">前往选购</van-button> 
      </div>
      <div class="top">
        <b class="left"> 
        </b> 
        <div class="search">
         <span>购物车</span>
        </div>
        <div class="right"><van-icon name="weapp-nav" /></div>
      </div> 
    </div>
</template>

<script>
import { Toast } from "vant";
import api from "../http/api.js";
import { useStore } from "vuex";
import { ref, onMounted, computed } from "vue";
export default {
  setup(props) {
    const store = useStore();
    const checked = ref(store.state.checked);
    // 前往选购
    const toHome = () => {
      store.commit("setTab", { act: 0, isShow: true });
      location.href = "/#/home";
    };
    // 获取购物车数据
    const getCart = async () => {
      let res = await api.setCart();
      console.log(res.data, "获取购物车数据");
      if (res.data.data.length) {
        let obj = res.data.data.forEach(item => {
          return (item.check = true);
        });
      }
      // 获取到数据之后将数据存储在本地中
      store.commit("cartlist", res.data.data);
    };
    // 加
    const plus = id => {
      console.log("数量++");
    };
    // 减
    const minus = id => {
      console.log("数量--");
    };
    // 删除
    const del = async id => {
      let res = await api.delCart(id);
      console.log(res, "删除列表");
      if (res.data.resultCode == 200) {
        // 提示删除成功
        Toast.success(res.data.message);
      } else {
        // 失败
        Toast.error(res.data.message);
      }
      getCart();
    };
    // 单选
    const changeCheck = index => {
      store.commit("changeCheckx", index);
      console.log(store.state.cart[index].check);
    };
    // 全选
    const qx = () => {
      store.commit("checkAll");
    };
    // 计算商品 总价格
    const zprice = computed(() => {
      let price = 0;
      store.state.cart.forEach(item => {
        if (item.check) {
          price += item.goodsCount * item.sellingPrice;
        }
      });
      return price;
    });
    // 计算商品总数量
    const znum = computed(() => {
      let num = 0;
      store.state.cart.forEach(item => {
        if (item.check) {
          num += item.goodsCount;
        }
      });
      return num;
    });
    // 提交订单
    const onSubmit = () => {
      // 遍历购物车列表
      let arr = store.state.cart.filter(item => {
        return item.check;
      });
      let str = ""; 
      arr.forEach((item, index) => {
        if (index == arr.length - 1) {
          str += item.cartItemId;
        } else {
          str += item.cartItemId + ",";
        }
      });
      store.commit("setTab", { act: -1, isShow: false });
      // 去订单页面
      location.href = `/#/order?ids=${str}`;
    };
    // 挂载
    onMounted(() => {
      getCart();
    });
    return {
      store,
      del,
      toHome,
      changeCheck,
      qx,
      checked,
      plus,
      minus,
      getCart,
      zprice,
      znum,
      onSubmit
    };
  }
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  // 顶部搜索框
  .top {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    // 中间搜索框
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
  // 购物车列表
  .cart {
    margin-top: 130px;
    text-align: left;
    // 标题布局
    .title {
      width: 100%;
    }
    .goods-card {
      margin: 0;
      background-color: white;
    }

    .delete-button {
      height: 100%;
    }
  }
}
</style>
